import React from 'react'
import { connect } from 'react-redux'
import {
  ListItem,
  ListInfo
} from '../style.js'

class List extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        {
          this.props.list.map((item) => {
            return (
              <ListItem key={item.get('id')}>
                <img className="list-pic" src={item.get('imgUrl')} alt=""/>
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="desc">{item.get('content')}</p>
                </ListInfo>
              </ListItem>
            )
          })
        }
      </div>
      
    )
  }
}
const mapState = (state) => ({
  list: state.getIn(['home', 'articleList'])
})

export default connect(mapState, null)(List)